<script setup>
import "@material/web/button/text-button.js";

const props = defineProps(["device"]);
const emits = defineEmits(["disable", "enable", "cert", "delete"]);
</script>

<template>
  <tr>
    <td>{{ props.device?.id }}</td>
    <td>{{ props.device?.name }}</td>
    <td>{{ props.device?.enabled ? "已启用" : "已禁用" }}</td>
    <td>
      <div class="device-actions">
        <md-text-button @click="$emit('cert')">查看证书</md-text-button>
        <md-text-button v-if="props.device?.enabled" @click="$emit('disable')">禁用</md-text-button>
        <md-text-button v-if="!props.device?.enabled" @click="$emit('enable')">启用</md-text-button>
        <md-text-button @click="$emit('delete')">删除</md-text-button>
      </div>
    </td>
  </tr>
</template>

<style scoped>
.device-actions {
  display: flex;
  gap: 8px;
}
</style>